<template>
  <div class="combox">
    <div class="titlebox">评论区 ({{ count }})</div>
    <div class="inputbox">
      <div class="area">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          minlength="2"
          maxlength="150"
          show-word-limit
          resize="none"
          rows="7"
          v-model="content"
          id="textpanel"
        ></el-input>
      </div>
      <div class="user">
        <el-input
          placeholder="请输入用户名"
          minlength="2"
          maxlength="8"
          v-model="userName"
          :disabled="disabled"
        ></el-input>
        <div class="imgbox">
          选择头像：
          <img
            v-for="(item, index) in srcList"
            :key="index"
            :src="item"
            alt=""
            :class="index == currentIndex ? 'active' : ''"
            @click="changeIndex(index)"
          />
        </div>
        <div class="icon clearfix">
          <img
            class="emoji-panel-btn"
            src="/images/face.png"
            @click="changeShow"
          />
          <el-button
            type="primary"
            style="height:40px;margin-left:30px;verticalAlign: bottom;"
            @click="postCom"
            >发表评论</el-button
          >
          <emoji-panel
            top="-170px"
            left="-235px"
            @emojiClick="appendEmoji"
            v-if="showEmoji"
          ></emoji-panel>
        </div>
      </div>
    </div>
    <transition-group tag="div" name="list" class="comment">
      <div v-for="(item, index) in articleCom" :key="index" class="item">
        <div class="username">
          <img
            style=" borderRadius:50%"
            class="userimg"
            :src="item.user.isAuthor ? admin.photo : item.imgSrc"
            alt=""
          />
          <span class="from" :class="item.user.isAuthor ? 'active' : ''"
            >{{ item.user.isAuthor ? admin.userName : item.user.name }}
            <i class="active" v-if="item.user.isAuthor">(博主)</i>
          </span>
        </div>
        <div class="info">
          <div class="htmlcom" v-html="item.content"></div>
          <div class="otherbox">
            <div class="time">{{ item.date }}</div>
            <div class="operation">
              <i
                class="el-icon-delete delete"
                @click="deleteCom(item._id)"
                v-if="$store.state.isLogin"
              ></i>
              <i
                class="iconfont icon-message"
                @click="changeParentIndex(index)"
                style="fontSize:15px"
                >({{ item.children.length }})</i
              >
            </div>
          </div>
          <div v-if="index == parentIndex">
            <com-item
              top="-80px"
              left="0px"
              @handleCom="
                handleCom($event, { toUser: item.user, id: item._id })
              "
            ></com-item>
            <div class="childcomt" v-if="item.children.length">
              <div
                class="child_item"
                v-for="(item2, index2) in item.children"
                :key="index2"
              >
                <div class="namebox">
                  <span
                    class="from"
                    :class="item2.fromUser.isAuthor ? 'active' : ''"
                    >{{
                      item2.fromUser.isAuthor
                        ? admin.userName
                        : item2.fromUser.name
                    }}
                    <i class="active" v-if="item2.fromUser.isAuthor">(博主)</i>
                  </span>
                  <span>回复</span>
                  <span
                    class="to"
                    :class="item2.toUser.isAuthor ? 'active' : ''"
                    >{{
                      item2.toUser.isAuthor ? admin.userName : item2.toUser.name
                    }}
                    <i class="active" v-if="item2.toUser.isAuthor">(博主)</i>
                  </span>
                </div>
                <div class="c_content" v-html="item2.c_content"></div>
                <div class="c_other">
                  <div class="c_time">
                    {{ item2.c_date }}
                  </div>
                  <div class="c_opera">
                    <i
                      class="el-icon-delete delete"
                      @click="deleteCom(item._id, item2.c_date)"
                      v-if="$store.state.isLogin"
                    ></i>
                    <i
                      class="iconfont icon-message"
                      @click="chageComIndex(index, index2)"
                      style="fontSize:15px"
                    ></i>
                  </div>
                </div>
                <div v-if="-Math.ceil(index + 1) + '' + index2 == comIndex">
                  <com-item
                    top="-80px"
                    left="0px"
                    @handleCom="
                      handleCom($event, {
                        toUser: item2.fromUser,
                        id: item._id,
                      })
                    "
                  ></com-item>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition-group>
    <div class="pagebox">
      <el-pagination
        :page-size="limit"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :hide-on-single-page="true"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import comItem from "./comitem"
import {
  PostComment,
  GetComment,
  PostChild,
  UnreadCom,
  DeleteComment,
} from "../../api/index"
import EmojiPanel from "../emoji/EmojiPanel"
export default {
  data() {
    return {
      admin: "",
      disabled: false,
      articleCom: [],
      content: "",
      userName: "",
      showEmoji: false,
      total: 0,
      count: 0,
      page: 1,
      limit: 5,
      parentIndex: -1,
      comIndex: 0,
      currentIndex: 0,
      srcList: [
        "/images/1.png",
        "/images/2.png",
        "/images/3.png",
        "/images/4.png",
      ],
    }
  },
  props: ["id", "title"],
  created() {
    this.getCom()
  },
  mounted() {
    this.admin = this.$store.state.admin
    this.disabled = this.$store.state.isLogin
  },
  components: {
    comItem,
    EmojiPanel,
  },
  methods: {
    changeShow() {
      this.showEmoji = !this.showEmoji
    },
    handleCurrentChange(val) {
      this.page = val
      this.getCom()
      this.parentIndex = -1
      this.comIndex = 0
    },

    async postCom() {
      let content = this.content.replace(/:.*?:/g, this.emoji) // 替换":"符号包含的字符串,通过emoji方法生成表情<span></span>
      let user = {}
      if (this.$store.state.isLogin) {
        user = {
          name: "博主",
          isAuthor: true,
        }
      } else {
        if (this.userName == "" || this.comment == "") {
          this.$notify.error({
            title: "错误",
            message: "用户名或者评论不能为空",
          })
          return
        } else {
          user = {
            name: this.userName,
            isAuthor: false,
          }
        }
      }
      let result = await PostComment({
        article: this.id,
        arName: this.title,
        user,
        content,
        imgSrc: this.srcList[this.currentIndex],
        date: this.$dateFormat("YYYY-mm-dd HH:MM:SS", new Date()),
      })
      if (!this.$store.state.isLogin) {
        let res = await UnreadCom({
          article: this.id,
          arName: this.title,
          parentId: result.data._id,
          fromUser: user.name,
          toUser: "博主",
          content,
          date: this.$dateFormat("YYYY-mm-dd HH:MM:SS", new Date()),
        })
      }

      this.getCom()
      this.content = ""
      this.userName = ""
    },
    async getCom() {
      let result = await GetComment({
        article: this.id,
        limit: this.limit,
        page: this.page,
      })
      this.articleCom = result.data.map((item) => {
        if (item.children) {
          item.children = item.children.reverse()
        }
        return item
      })
      this.total = result.total
      this.count = result.count
    },
    changeIndex(index) {
      this.currentIndex = index
    },
    changeParentIndex(index) {
      if (this.parentIndex == index) {
        this.parentIndex = -1
      } else {
        this.parentIndex = index
      }
    },
    chageComIndex() {
      let index = -[Math.ceil(arguments[0] + 1) + "" + arguments[1]]
      if (this.comIndex == index) {
        this.comIndex = 0
      } else {
        this.comIndex = index
      }
    },
    async handleCom(child, obj) {
      let req = {
        fromUser: child.fromUser,
        c_content: child.c_content,
        c_date: this.$dateFormat("YYYY-mm-dd HH:MM:SS", child.c_date),
        toUser: obj.toUser,
        parentId: obj.id,
      }
      let result = await PostChild(req)

      if (!this.$store.state.isLogin) {
        let res = await UnreadCom({
          article: this.id,
          arName: this.title,
          fromUser: child.fromUser.name,
          toUser: obj.toUser.name,
          content: child.c_content,
          parentId: obj.id,
          date: this.$dateFormat("YYYY-mm-dd HH:MM:SS", new Date()),
        })
      }

      this.getCom()
      this.comIndex = 0
    },

    // 删除评论
    async deleteCom() {
      var _id = arguments[0]
      var c_date = -1
      if (arguments.length == 2) {
        c_date = arguments[1]
      }
      let result = await DeleteComment({
        _id,
        c_date,
      })
      if (result.status) {
        this.$notify({
          title: "成功",
          message: result.msg,
          type: "success",
        })
        this.getCom()
      } else {
        this.$notify.error({
          title: "错误",
          message: result.msg,
        })
      }
    },

    emoji(word) {
      // 生成html
      const type = word.substring(1, word.length - 1)
      return `<span class="emoji-item-common emoji-${type} emoji-size-small" ></span>`
    },
    // EmojiPanel触发的事件
    appendEmoji(text) {
      const el = document.getElementById("textpanel")
      this.content = el.value + ":" + text + ":"
      this.showEmoji = false
    },
  },
}
</script>
<style lang="scss" scoped>
.combox {
  padding-bottom: 20px;
  .titlebox {
    background: #409eff;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-indent: 10px;
    color: white;
  }
  .inputbox {
    margin-top: 20px;
    display: flex;
    background: rgb(235, 234, 233);
    padding: 10px;
    .area {
      width: 69%;
    }
    .user {
      width: 31%;
      margin: 0px 20px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
  }
}
.imgbox {
  display: inline-block;
  vertical-align: bottom;
  img {
    width: 38px;
    margin-right: 5px;
    vertical-align: bottom;
    // filter: blur(1px);
    opacity: 0.4;
  }
  img:hover {
    cursor: pointer;
  }
  .active {
    opacity: 1;
  }
}
.clearfix {
  width: 100%;
  &:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
.icon {
  position: relative;
  .emoji-panel-btn {
    display: inline-block;
    height: 35px;
    width: 35px;
    vertical-align: middle;
    &:hover {
      cursor: pointer;
      opacity: 0.8;
    }
  }
  .iconfont {
    cursor: pointer;
    color: #f7ba2a;
    vertical-align: bottom;
  }
  .emoji-box {
    position: absolute;
    z-index: 10;
    left: -105px;
    top: -215px;
    box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.2);
    background: white;
    .btn {
      position: absolute;
      border: none;
      right: 5px;
      top: 5px;
      z-index: 10;
    }
    .btn:hover {
      cursor: pointer;
      color: red;
    }
    .arrow {
      left: 10px;
    }
  }
}
.comment {
  margin: 0px 20px;
  margin-top: 20px;

  .item {
    margin-top: 20px;
    padding: 10px;
    margin: 0;
    border-top: 1px solid #bfcbd9;
    .username {
      height: 40px;
      vertical-align: middle;
      font-size: 18px;
      .userimg {
        margin-right: 10px;
        margin-top: 0px !important;
        display: inline-block;
        width: 40px;
        height: 40px;
        vertical-align: middle;
      }
    }
    .info {
      display: inline-block;
      vertical-align: middle;
      word-break: normal;
      width: calc(100% - 120px);
      margin: 0px 60px;
      .htmlcom {
        line-height: 25px;
        color: rgb(121, 121, 121);
      }
      .otherbox {
        margin-top: 20px;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        color: rgb(150, 146, 146);
        .time {
          color: rgb(194, 194, 194);
          font-size: 15px;
        }
        .operation {
          i {
            color: rgb(194, 194, 194);
            margin-left: 15px;
          }
          i:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
  .childcomt {
    margin: 10px 0px;
    padding: 10px;
    background: #fafbfc;
    .child_item {
      margin: 10px 0px;
      padding-bottom: 5px;
    }
    .child_item:not(:first-child) {
      padding-top: 15px;
      border-top: 1px solid #bfcbd9;
    }
    .namebox {
      span {
        font-size: 15px;
        color: rgb(177, 175, 175);
      }
      .from {
        margin-right: 10px;
        color: rgb(79, 81, 83);
      }
      .to {
        margin-left: 10px;
        color: rgb(79, 81, 83);
      }
    }
    .c_content {
      line-height: 25px;
      margin: 10px 0px;
      margin-left: 20px;
      font-size: 14px;
      vertical-align: middle;
      color: rgb(121, 121, 121);
    }
    .c_other {
      margin-left: 20px;
      display: flex;
      justify-content: space-between;
      .c_time {
        color: rgb(194, 194, 194);
        font-size: 15px;
      }
      .c_opera {
        text-align: right;
        i {
          color: rgb(194, 194, 194);
          margin-left: 15px;
        }
        i:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.pagebox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.active {
  color: #409eff !important;
}
i {
  font-style: normal;
}
</style>
<style lang="scss">
.emoji-item-common {
  background: url("/images/emoji_sprite.png");
  display: inline-block;
  margin-top: 2px;
  &:hover {
    cursor: pointer;
  }
}
.emoji-size-small {
  // 表情大小
  zoom: 0.4;
  vertical-align: top;
}
.emoji-size-large {
  zoom: 0.5; // emojipanel表情大小
  margin: 4px;
}
.comments-list {
  margin-top: 20px;
  .comments-list-item {
    margin-bottom: 20px;
    .comments-list-item-heading {
      display: inline-block;
      img {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        vertical-align: middle;
      }
      .comments-list-item-username {
        margin-left: 5px;
        font-weight: bold;
      }
    }
    .comments-list-item-content {
      margin: 10px 0px;
      border-bottom: 1px solid #cccccc;
      &:last-child {
        border-bottom: 0;
      }
      span {
        vertical-align: top;
      }
    }
  }
}
</style>
